<template>
    <div>
        <h2 v-if="users">用户数据(服务器3000)</h2>
        <p v-for="user in users" :key="user.id">
            {{user.id}} -- {{user.name}} -- {{user.age}}
        </p>
        <h2 v-if="goods">商品数据(服务器3001)</h2>
        <p v-for="pro in goods" :key="pro.id">
            {{pro.id}} -- {{pro.name}} -- {{pro.price}}元
        </p>
    </div>
</template>

<script>
    // import axios from "axios";

    export default {
        name: "RequestView",
        data(){
            return {
                users: null,
                goods: null
            }
        },
        created(){
            this.init();
        },
        methods: {
            async init(){
                let res1 = await this.$http({url : "/api_user/list", method: "get"})
                let res2 = await this.$http({url : "/api_pro/list", method: "get"})
                this.users = res1.data
                this.goods = res2.data
            }
        },
        mounted(){
            // ES6 自带的，无需安装第三方模块
            /*fetch('/api/list').then(res => {
                return res.json()
            }).then(res => {
                console.log(res)
            })*/

            // axios 需要安装模块，并且需要封装一下
            /*this.$http({
                url : "/api_user/list",
                method: "get"
            }).then(res => {
                this.users = res.data
            })

            this.$http({
                url : "/api_pro/list",
                method: "get"
            }).then(res => {
                this.goods = res.data
            })*/
        },
        beforeDestroy(){

        }
    }
</script>

<style scoped>

</style>